<template>
  <view class="cashier">
    <Navbar title="支付" disabled occupy>
      <u-icon slot="left" name="arrow-left" color="#fff" />
    </Navbar>
    <view class="cashier-body">
      <view class="bill f f-col f-ac f-jc">
        <image
          :src="webSrc('/profile/static/bill.png')"
          style="height: 268rpx; width: 268rpx"
        />
        <text class="tips mt-20">订单支付成功</text>
      </view>
      <view class="f f-ac f-jb f-col price-row pt-20 pb-20">
        <view class="f f-al f-col">
          <view class="f f-ac f-jc">
            <u-icon
              name="checkmark-circle-fill"
              label="支付方式："
              label-color="#909090"
              label-size="28rpx"
              space="10"
              color="#24DE73"
            />
            <text class="green">微信支付</text>
          </view>
          <view class="f f-ac f-jc mt-10">
            <u-icon
              name="rmb-circle-fill"
              label="支付金额："
              label-color="#909090"
              label-size="28rpx"
              space="10"
              color="#ED4A49"
            />
            <text class="red">￥{{ price }}</text>
          </view>
        </view>
        <view class="f f-ac f-jc mt-20">
          <view class="btn" @click="handleOrder">查看订单</view>
          <view class="btn" @click="handleHome">回到首页</view>
        </view>
      </view>
      <view class="price-row pt-10 pb-10">
        <u-text text="温馨提示：" color="#909090" size="28rpx" bold line-height="50rpx" />
        <u-text
          text="请在我的账户里申请退款 查看账单等操作"
          color="#909090"
          size="28rpx"
          line-height="60rpx"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      price: 0, // 充值金额
    };
  },
  onLoad(e) {
    this.price = e.price;
  },
  methods: {
    // 查看订单
    handleOrder() {
      uni.navigateTo({ url: "/pages/my/myOrder" });
    },
    // 回到首页
    handleHome() {
      uni.switchTab({ url: "/pages/tabBar/homeIndex" });
    },
  },
};
</script>

<style lang="scss" scoped>
.cashier {
  width: 100%;
  min-height: 100vh;
  background: radial-gradient(48.31% 108.99% at 100% 1.17%, #142527 0%, #15161c 100%);
  .cashier-body {
    margin: 0 30rpx;
    .bill {
      height: 478rpx;
      border-bottom: 1rpx dashed #24de73;
      .tips {
        color: #fff;
        text-align: center;
        font-size: 36rpx;
        font-weight: bold;
      }
    }
    .price-row {
      border-bottom: 1rpx dashed #24de73;
      .green {
        font-weight: bold;
        color: #24de73;
      }
      .red {
        font-weight: bold;
        color: #ed4a49;
      }
      .btn {
        width: 270rpx;
        height: 86rpx;
        line-height: 86rpx;
        text-align: center;
        color: #24de73;
        font-size: 14;
        border-radius: 20rpx;
        border: 1px solid #24de73;
        background-color: #15161c;
        margin-right: 30rpx;
        &:last-child {
          margin-right: 0;
          color: #fff;
          background-color: #24de73;
        }
        &:active {
          color: #fff;
          background-color: #24b661;
        }
      }
    }
  }
}
</style>
